<template>
  <div id="invitationorder">
    <div class="paycover" v-show="payCover"></div>
    <div class="pay_box_code" v-show="payCode">
      <p>请确认支付是否已经完成</p>
      <p>
        <span @click="onActCancel" class="repay">重新支付</span>
        <span @click="onActConfirm" class="pay_success">已完成支付</span>
      </p>
    </div>
    <amap></amap>
    <div class="invitationOrderBottom_box" v-if="bottomBoxShow">
      <div class="invitation_information">
        <div class="driver_box">
          <div class="driver_photo">
            <p>
              <img :src="driver_photoImg" />
              <span>{{getHitchOrderDetailData?getHitchOrderDetailData.driverGrade:''}}</span>
            </p>
          </div>
          <div class="driver_car">
            <p>
              <span class="car-number">{{getHitchOrderDetailData?getHitchOrderDetailData.plate:''}}</span>
              <span
                class="car_type"
              >{{getHitchOrderDetailData?getHitchOrderDetailData.carColour:''}}.{{getHitchOrderDetailData?getHitchOrderDetailData.carBrandModel:''}}</span>
            </p>
            <p>
              <span class="driver-name">{{getHitchOrderDetailData?getHitchOrderDetailData.driverNickName:''}}</span>
              <span class="stars">
                <i class="active"></i>
              </span>
              <span class="dirver-score">{{starsNumber}}</span>
              <span class="dirver_number">{{getHitchOrderDetailData?getHitchOrderDetailData.driverReceiptNumber:''}}单</span>
            </p>
          </div>
          <div class="driver_phone">
            <span @click="callDriver">
              <img src="@/assets/imgs/phone_ico.png" />
            </span>
          </div>
        </div>
        <div style="clear:both"></div>
        <div>
          <div class="Colleague_per" v-if="sameUsers">
            <ul>
              <li>
                <p>
                  已接到
                  <span>{{getHitchOrderDetailData?getHitchOrderDetailData.allotOrderNum :''}}位</span>乘客
                </p>
              </li>
            </ul>
          </div>
          <div v-else class="colleague_no">
            <p>
              <img src="@/assets/imgs/chixuxunzhao_icon.png" class="Rotation" />
              持续寻找乘客中…
            </p>
          </div>
        </div>
        <div style="clear:both"></div>
        <div class="orderinformation_box">
          <ul class="orderinformation_list">
            <li>
              <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
              <span>{{getHitchOrderDetailData?getHitchOrderDetailData.departureTimeText:''}}</span>
              <em
                v-show="getHitchOrderDetailData?getHitchOrderDetailData.orderLabel:'' != ''"
              >{{getHitchOrderDetailData?getHitchOrderDetailData.orderLabel:''}}</em>
            </li>
            <li>
              <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
              <span>{{getHitchOrderDetailData?getHitchOrderDetailData.originCity:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.originShortAddress:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.originDistance:''}}</span>
            </li>
            <li>
              <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
              <span>{{getHitchOrderDetailData?getHitchOrderDetailData.destCity:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.destShortAddress:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.destDistance:''}}</span>
            </li>
          </ul>
        </div>
        <!--乘客确认同行状态-->
        <div class="passenger_box">
          <p class="passenger_time">
            预计出发时间为
            <span>{{getReserveTime}}</span>
          </p>
          <div class="passenger_box_list">
            <div class="passenger_box_list_left">
              <h6>预付车费{{getHitchOrderDetailData?getHitchOrderDetailData.orderEstimateAmt:''}}元</h6>
              <p>
                拼成返还最高
                <span>{{getHitchOrderDetailData?getHitchOrderDetailData.returnHighestAmt:''}}元</span>
              </p>
            </div>
            <div class="passenger_box_list_center" @click="peerRecognition">
              <h6>确认同行并支付</h6>
              <p>{{expiredTime}}</p>
            </div>
            <div class="passenger_box_list_right" @click="refusePeer">
              <p>拒绝同行</p>
            </div>
          </div>
          <div style="clear:both"></div>
          <div class="orderinformation_bottom">
            <ul>
              <li @click="callServicePhone">
                <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
              </li>
              <li @click="cancelOrderPay">
                <md-icon name="quxiao_icon" slot="left" class="quxiao_icon"></md-icon>取消订单
              </li>
            </ul>
          </div>
        </div>
        <div style="clear:both"></div>
      </div>
    </div>
    <!--支付订单-->
    <div v-else>
      <div v-if="showPay">
        <md-popup
          id="popup-container"
          v-model="value"
          position="bottom"
          :has-mask="false"
          :mask-closable="false"
          prevent-scroll
          @hide="payCancel"
        >
          <md-popup-title-bar title="支付车费" ok-text cancel-text="取消" @cancel="payCancel"></md-popup-title-bar>
          <div class="taxiPayType">
            <p class="invition_hd">请您按独享价预先支付车费</p>
            <p class="invition_hd_text">预先支付无需承担任何风险，若拼车成功，行程结束后预付款未使用的部分将立即发起原路退款。若没有拼车成功，则按独享价收取。若取消订单，预付款原路退款。</p>
            <p class="city_pay">
              独享价
              <span>{{payMoney}}元</span>
            </p>
            <p class="taxiPayAlt_hd">实际支付金额</p>
            <p class="taxiPayAlt">
              ￥
              <span>{{payMoney}}</span>
            </p>
            <div class="payType">
              <ul class="choice-payment-method">
                <li @click="paybalance">
                  <img src="@/assets/imgs/snyc_zf_yezf.png" />
                  <span>余额支付</span>
                  <b>
                    <em>{{userMoney}}元</em>
                    <i class="choice-payment-right" :class="{active:paymentMethod == 'balance'}"></i>
                  </b>
                </li>
                <li @click="payWx">
                  <img src="@/assets/imgs/cz_wx_icon@2x.png" />
                  <span>微信支付</span>
                  <b>
                    <i
                      class="choice-payment-right"
                      :class="{active:paymentMethod == 'wechat'||paymentMethod == 'miniprogram'||paymentMethod=='h5wx'}"
                    ></i>
                  </b>
                </li>
                <li @click="payAli" v-if="hasAlipay">
                  <img src="@/assets/imgs/cz_zfb_icon@2x.png" />
                  <span>支付宝支付</span>
                  <b>
                    <i class="choice-payment-right" :class="{active:paymentMethod == 'alipay'}"></i>
                  </b>
                </li>
              </ul>
            </div>
            <p class="taxi_pay" @click="cityPayBtn">确认支付</p>
          </div>
        </md-popup>
      </div>
      <div v-else>
        <md-popup id="popup-container" v-model="paypwdvalue" position="bottom">
          <md-popup-title-bar title="请输入支付密码" ok-text cancel-text="取消" @cancel="paypwdcancel"></md-popup-title-bar>
          <div class="keyBoardShow">
            <ul class="paypwd_box">
              <li>
                <span v-show="payPwd.length >= 1"></span>
              </li>
              <li>
                <span v-show="payPwd.length >= 2"></span>
              </li>
              <li>
                <span v-show="payPwd.length >= 3"></span>
              </li>
              <li>
                <span v-show="payPwd.length >= 4"></span>
              </li>
              <li>
                <span v-show="payPwd.length >= 5"></span>
              </li>
              <li>
                <span v-show="payPwd.length >= 6"></span>
              </li>
            </ul>
            <md-number-keyboard
              v-model="paypwdvalue"
              type="simple"
              @enter="hitchOnNumberEnter"
              @delete="hitchOnNumberDelete"
            ></md-number-keyboard>
          </div>
        </md-popup>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/snkc_xcqx_time.svg';
import '@/assets/svgs/kefu_icon.svg';
import '@/assets/svgs/quxiao_icon.svg';
import '@/assets/svgs/tishi.svg';
import {
  Tabs,
  Icon,
  Toast,
  Dialog,
  Popup,
  PopupTitleBar,
  Picker,
  NumberKeyboard
} from 'mand-mobile';
import Loading from '@/components/loading';
import TopBar from '@/components/TopBar';
import MapTool from '@/components/map/MapTool';
import { Base64 } from 'js-base64';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import http from '@/common/http';
import Utils from '@/common/pakjUtils';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
const hitch_pay_status = 'CALLED_PAY';
const hitch_pay_orderno = 'ORDER_NO';
// var Vconsole = require('vconsole');
// var cons = new Vconsole();
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [TopBar.name]: TopBar,
    [MapTool.name]: MapTool,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Picker.name]: Picker,
    [NumberKeyboard.name]: NumberKeyboard
  },
  data() {
    return {
      title: '确认同行',
      payCover: false,
      payCode: false,
      bottomBoxShow: true,
      driver_photoImg: '',
      starsNumber: '',
      sameUsers: false, // 是否有同行乘客
      showPay: true,
      value: '',
      paymentMethod: 'balance',
      userMoney: '0.00', // 余额
      payType: '1004', // 支付方式
      payMoney: '0.00', // 订单金额
      paypwdvalue: false,
      payPwd: '',
      hitchPaymentStatusTimer: '',
      hitchOrderTimer: '',
      expiredTime: ''
    };
  },
  created() {
    this.getOrderPath();
    // 获取余额
    http.post('/pakj/hitchOrder/getUserMoney', {}).then(res => {
      if (res.data.code === '000000') {
        console.log(res.data);
        this.userMoney = res.data.data.balanceAmt;
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
    let calledPay = localStorage.getItem(hitch_pay_status);
    if (calledPay === '1') {
      this.payCover = true;
      this.payCode = true;
    }
  },
  mounted() {
    // 获取订单详情
    this.getHitchOrderDetail();
  },
  methods: {
    ...mapActions(['getHitchOrderDetailInfo', 'hitchSubmitPayment', 'hitchPartySubmitPayment']),
    // 获取订单详情
    getHitchOrderDetail() {
      if (this.$route.query.orderno) {
        this.getHitchOrderDetailInfo(this.$route.query.orderno).then(() => {
          Loading.hide();
          console.log(this.getHitchOrderDetailData);
          let payCountTime = parseInt(this.getHitchOrderDetailData.payCountTime);
          this.hitchOrderTimer = setInterval(() => {
            let time = payCountTime--;
            if (time > 0) {
              let minutes =
                Math.floor(time / 60) > 9 ? Math.floor(time / 60) : '0' + Math.floor(time / 60);
              let seconds =
                Math.floor(time % 60) > 9 ? Math.floor(time % 60) : '0' + Math.floor(time % 60);
              this.expiredTime = minutes + ':' + seconds;
            } else {
              clearInterval(this.hitchOrderTimer);
              Dialog.alert({
                icon: 'tishi',
                content: '订单支付已超时，请重新下单',
                confirmText: '确认',
                onConfirm: () => {}
              });
            }
          }, 1000);
          // 是否有同行拼友
          if (this.getHitchOrderDetailData.allotOrderNum === '0') {
            this.sameUsers = false;
          } else {
            this.sameUsers = true;
          }
          // 车辆信誉分
          if (this.getHitchOrderDetailData.driverCreditScore) {
            this.starsNumber = this.getHitchOrderDetailData.driverCreditScore;
          } else {
            this.starsNumber = '100';
          }
          // 司机头像
          this.driver_photoImg = this.getHitchOrderDetailData.driverHeadPhoto;
          // 实际支付金额
          this.payMoney = this.getHitchOrderDetailData.orderEstimateAmt;
        });
      } else {
        Dialog.alert({
          title: '提示',
          content: '获取不到行程id',
          confirmText: '确定'
        });
      }
    },
    getOrderPath() {
      // 检测是否拉起支付窗口
      if (this.$route.name === 'HitchPaymentOrder') {
        this.bottomBoxShow = false;
        this.value = true;
      } else {
        this.bottomBoxShow = true;
        this.value = false;
      }
    },
    // 联系司机
    callDriver() {
      window.location.href = 'tel://' + this.getHitchOrderDetailData.driverPhone;
    },
    // 联系客户
    callServicePhone() {
      window.location.href = 'tel://' + this.getHitchOrderDetailData.servicePhone;
    },
    // 取消订单
    cancelOrderPay() {
      let params = {
        type: '1',
        orderNo: this.$route.query.orderno,
        duty: '0'
      };
      http.post('/pakj/hitchOrder/cancelOrder', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.$router.replace({
            name: 'homeHitchhike'
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 拒绝同行
    refusePeer() {
      Dialog.confirm({
        icon: 'tishi',
        content: '确认拒绝同行吗？',
        confirmText: '确认',
        cancelText: '再等等',
        onConfirm: () => {
          let parm = {
            orderNo: this.$route.query.orderno
          };
          http.post('/pakj/hitchOrder/refuseDriver', parm).then(res => {
            if (res.data.code === '000000') {
              console.log(res.data);
              this.$router.replace({
                name: 'HitchWaitingLobby'
              });
            } else {
              Dialog.alert({
                title: '提示',
                content: res.data.msg,
                confirmText: '确定'
              });
            }
          });
        }
      });
    },
    // 确认同行并支付
    peerRecognition() {
      this.value = true;
      this.bottomBoxShow = false;
      this.$router.push({
        name: 'HitchPaymentOrder',
        query: {
          orderno: this.$route.query.orderno
        }
      });
    },
    payCancel() {
      Dialog.confirm({
        title: '提示',
        content: '是否取消支付',
        confirmText: '确定',
        onConfirm: () => {
          this.$router.push({
            name: 'hitchColleagueOrder',
            query: {
              orderno: this.$route.query.orderno
            }
          });
          this.value = false;
          this.bottomBoxShow = true;
        }
      });
    },
    paypwdcancel() {
      this.paypwdvalue = false;
      this.showPay = true;
      this.value = true;
      this.payPwd = '';
    },
    paybalance() {
      // 选择余额支付
      this.paymentMethod = 'balance';
      this.payType = '1004';
    },
    payWx() {
      // 选择微信支付
      switch (Utils.getCurrentEnv()) {
        case 'mini':
          this.paymentMethod = 'miniprogram';
          break;
        case 'wx':
          this.paymentMethod = 'wechat';
          break;
        case 'h5':
          this.paymentMethod = 'h5wx';
          break;
      }
      this.payType = '1001';
    },
    payAli() {
      // 选择支付宝支付
      this.paymentMethod = 'alipay';
      this.payType = '1002';
    },
    cityPayBtn() {
      if (this.paymentMethod === 'balance') {
        // 余额支付
        if (parseInt(this.userMoney) > parseInt(this.payMoney)) {
          this.showPay = false;
          this.paypwdvalue = true;
          // this.value = false;
        } else {
          Dialog.alert({
            title: '提示',
            content: '余额不足，请选择其他支付方式',
            confirmText: '确定'
          });
        }
      } else if (this.paymentMethod === 'wechat') {
        // 微信支付
        let param = {
          payType: this.payType,
          paySource: Utils.getCurrentEnv(), // 支付来源
          orderNo: this.$route.query.orderno
        };
        this.hitchPartySubmitPayment(param)
          .then(() => {
            let params = this.getHitchPartySubmitPaymentData.payBody;
            wx.config({
              debug: false,
              appId: params['appid'],
              timestamp: params['timestamp'],
              nonceStr: params['noncestr'],
              signature: params['signature'],
              jsApiList: ['chooseWXPay']
            });
            wx.ready(() => {
              wx.chooseWXPay({
                timestamp: params['timestamp'],
                nonceStr: params['noncestr'],
                package: 'prepay_id=' + params['package'], // TODO May need remove 'prepay\_id='
                signType: 'MD5', // TODO If this didn't work . Use 'SHA1'.
                paySign: params['paySign'],
                success: res => {
                  if (res.errMsg === 'chooseWXPay:ok') {
                    this.queryPaymentStatus();
                  }
                },
                fail: res => {}
              });
            });
          })
          .catch(reason => {
            Loading.hide();
            if (reason.message === '200008') {
              // 重复支付
              window.location.href = '';
            } else {
              Loading.hide();
              Dialog.alert({
                title: '错误',
                content: '支付失败',
                confirmText: '确定'
              });
            }
          });
      } else if (this.paymentMethod === 'miniprogram') {
        // 小程序支付
        let param = {
          payType: this.payType,
          paySource: Utils.getCurrentEnv(), // 支付来源
          orderNo: this.$route.query.orderno
        };
        this.hitchPartySubmitPayment(param)
          .then(res => {
            let jsonStr = JSON.stringify(res);
            let base64str = Base64.encode(jsonStr);
            wx.miniProgram.redirectTo({
              url: '/pages/payment/payment?info=' + base64str
            });
          })
          .catch(reason => {
            if (reason.message === '200008') {
              window.location.href = '';
            } else {
              Dialog.alert({
                title: '错误',
                content: '支付失败',
                confirmText: '确定'
              });
            }
          });
      } else if (this.paymentMethod === 'h5wx') {
        // H5支付
        let param = {
          payType: this.payType,
          paySource: Utils.getCurrentEnv(), // 支付来源
          orderNo: this.$route.query.orderno
        };
        this.hitchPartySubmitPayment(param)
          .then(() => {
            localStorage.setItem(hitch_pay_orderno, this.getHitchPartySubmitPaymentData.orderNo);
            localStorage.setItem(hitch_pay_status, '1');
            window.location.href = this.getHitchPartySubmitPaymentData.payBody.mweb_url;
          })
          .catch(reason => {
            if (reason.message === '200008') {
              window.location.href = '';
            } else {
              Dialog.alert({
                title: '错误',
                content: '支付失败',
                confirmText: '确定'
              });
            }
          });
      } else if (this.paymentMethod === 'alipay') {
        // 支付宝支付
        let parameters = {
          payType: this.payType,
          paySource: Utils.getCurrentEnv(), // 支付来源
          orderNo: this.$route.query.orderno
        };
        this.hitchPartySubmitPayment(parameters)
          .then(() => {
            localStorage.setItem(hitch_pay_orderno, this.getHitchPartySubmitPaymentData.orderNo);
            localStorage.setItem(hitch_pay_status, '1');
            let htmlStr = this.getHitchPartySubmitPaymentData.payBody;
            const div = document.createElement('div'); // 创建div
            div.innerHTML = htmlStr; // 将返回的form 放入div
            document.body.appendChild(div);
            document.forms[0].submit();
          })
          .catch(reason => {
            if (reason.message === '200008') {
              window.location.href = '';
            } else {
              Loading.hide();
              Dialog.alert({
                title: '错误',
                content: '支付失败',
                confirmText: '确定'
              });
            }
          });
      }
    },
    hitchOnNumberEnter(val) {
      if (this.payPwd.length < 6) {
        this.payPwd += val;
      }
      if (this.payPwd.length === 6) {
        this.createBalancePay();
      }
    },
    hitchOnNumberDelete() {
      if (this.payPwd === '') {
        return false;
      }
      this.payPwd = this.payPwd.substr(0, this.payPwd.length - 1);
    },
    createBalancePay() {
      let params = {
        payPwd: CryptoJS.MD5(this.payPwd).toString()
      };
      Loading.show();
      http.post('/pakj/passenger/validatePayPwd', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.showPay = true;
          this.paypwdvalue = false;
          this.payPwd = '';
          let param = {
            type: '1',
            orderNo: this.$route.query.orderno,
            paySource: Utils.getCurrentEnv(), // 支付来源
            timeval: toString(new Date().getTime()), // 时间戳
            ims: ''
          };
          this.hitchSubmitPayment(param).then(() => {
            window.location.href =
              '/hitchhike/hitchorderdetail?orderno=' + this.$route.query.orderno;
          });
        } else if (res.data.code === '200028') {
          Dialog.confirm({
            title: '提示',
            content: '您未设置支付密码，请去设置支付密码',
            confirmText: '确定',
            onConfirm: () => {
              this.$router.push({
                name: 'SetPayPwd'
              });
            }
          });
        } else {
          this.payPwd = '';
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 处理金额
    orderAmtFormat(number) {
      if (number.indexOf('.') === -1) {
        return number + '.00';
      } else {
        return number;
      }
    },
    onActConfirm() {
      localStorage.removeItem(hitch_pay_status);
      localStorage.removeItem(hitch_pay_orderno);
      this.payCover = false;
      this.payCode = false;
      Loading.show();
      this.queryPaymentStatus();
    },
    onActCancel() {
      localStorage.removeItem(hitch_pay_status);
      localStorage.removeItem(hitch_pay_orderno);
      this.payCover = false;
      this.payCode = false;
    },
    // 查询支付状态
    queryPaymentStatus() {
      let params = {
        orderNo: this.getHitchPartySubmitPaymentData.orderNo
      };
      this.$store
        .dispatch('hitchPaymentStatus', params)
        .then(() => {
          Toast({
            content: '支付成功',
            duration: 2000,
            hasMask: true
          });
          Loading.hide();
          clearInterval(this.hitchPaymentStatusTimer);
          setTimeout(() => {
            window.location.href =
              '/hitchhike/hitchorderdetail?orderno=' + this.getHitchPartySubmitPaymentData.orderNo;
          }, 2000);
        })
        .catch(error => {
          let str = error.toString().split(':');
          let code = str[1].trim();
          let msgText = str[2];
          if (code === '5') {
            // 正在查询支付结果
            Loading.show('正在查询支付结果');
            this.hitchPaymentStatusTimer = setInterval(() => {
              this.queryPaymentStatus();
            }, 5000);
          } else if (code === '4') {
            // 支付失败
            Toast({
              content: '支付失败',
              duration: 2000,
              hasMask: true
            });
            Loading.hide();
            clearInterval(this.hitchPaymentStatusTimer);
          }
        });
    }
  },
  beforeDestroy() {
    clearInterval(this.hitchPaymentStatusTimer);
    clearInterval(this.hitchOrderTimer);
  },
  // 监听路由变化
  watch: {
    $route: 'getOrderPath'
  },
  computed: {
    ...mapGetters([
      'getHitchOrderDetailData',
      'getHitchSubmitPaymentInfoData',
      'getHitchPartySubmitPaymentData'
    ]),
    hasAlipay() {
      if (Utils.getCurrentEnv() === 'h5') {
        return true;
      } else {
        return false;
      }
    },
    getPhoneStort() {
      let str = this.getHitchOrderDetailData;
      if (!str) {
        return '';
      }
      str = this.getHitchOrderDetailData.driverPhone;
      return str.substr(str.length - 4);
    },
    getReserveTime() {
      let str = this.getHitchOrderDetailData;
      if (!str) {
        return '';
      }
      let momstart = moment(this.getHitchOrderDetailData.reserveTime, 'x');
      let travelTimeStr = momstart.calendar(null, {
        sameDay: '[今天] HH:mm',
        nextDay: '[明天] HH:mm',
        nextWeek: 'dddd HH:mm',
        lastDay: '[昨天] HH:mm',
        lastWeek: '[上] ddd HH:mm',
        sameElse: 'MMMDo HH:mm'
      });
      return travelTimeStr;
    }
  }
};
</script>

<style lang="stylus">
#invitationorder {
  p, h6 {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .invitationOrderBottom_box {
    position: absolute;
    bottom: 20px;
    z-index: 1001;
    width: 100%;
  }

  .invitation_information {
    background-color: #fff;
    border-radius: 10px;
    margin: 0px 20px;
  }

  .driver_box {
    padding: 20px 30px;
  }

  .driver_photo {
    float: left;
  }

  .driver_photo p {
    position: relative;
  }

  .driver_photo p span {
    position: absolute;
    bottom: 0px;
    left: -5px;
    background-color: #6E6E6E;
    color: #fff;
    font-size: 24px;
    padding: 2px 2px;
    display: inline-block;
    width: 100px;
    text-align: center;
  }

  .driver_photo p img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .super_driver {
    position: absolute;
    bottom: -20px;
    left: -7px;
    z-index: 10;
    font-size: 18px;
    color: #fff;
    background-color: #6E6E6E;
    width: 100%;
    padding: 2px 5px;
  }

  .driver_car {
    float: left;
  }

  .driver_car p {
    margin-top: 10px;
    margin-left: 24px;
  }

  .driver-name {
    font-size: 30px;
    color: #333;
  }

  .stars {
    margin-left: 16px;
  }

  .stars i {
    display: inline-block;
    width: 24px;
    height: 22px;
    background: url('../../assets/imgs/xcxq_icon_xing_dark@2x.png') no-repeat center center;
    background-size: 24px 22px;
  }

  .stars i.active {
    background-image: url('../../assets/imgs/wf.png');
  }

  .dirver-score {
    font-size: 26px;
    color: #666;
    margin-left: 5px;
  }

  .dirver_number {
    font-size: 26px;
    color: #666;
    margin-left: 20px;
  }

  .car-number {
    font-size: 26px;
    color: #666;
  }

  .car_type {
    font-size: 26px;
    color: #666;
    margin-left: 20px;
  }

  .driver_phone {
    float: right;
    margin-top: 28px;
  }

  .driver_phone span {
    margin-left: 10px;
  }

  .driver_phone span img {
    width: 44px;
    height: 44px;
  }

  .Colleague_per {
    border-top: solid 1px #E0E0E0;
    margin-top: 20px;
    padding: 0px 30px;
  }

  .Colleague_per ul li {
    float: left;
    margin-top: 26px;
    margin-left: 20px;
    margin-bottom: 20px;
  }

  .Colleague_per ul li p {
    font-size: 24px;
    color: #666;
  }

  .Colleague_per ul li p span {
    color: #FF6917;
  }

  .colleague_no {
    border-top: solid 1px #E0E0E0;
    margin-top: 24px;
    padding: 0px 30px;
  }

  .colleague_no p {
    height: 65px;
    line-height: 65px;
    font-size: 24px;
    color: #666;
    margin-top: 10px;
  }

  .colleague_no p img {
    width: 24px;
    height: 24px;
    position: relative;
    top: 4px;
    right: 8px;
  }

  @keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }

    to {
      -webkit-transform: rotate(360deg);
    }
  }

  .Rotation {
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
  }

  .orderinformation_box {
    border-top: solid 1px #E0E0E0;
    margin-top: 10px;
  }

  .orderinformation_list {
    padding-top: 20px;
    position: relative;
  }

  .orderinformation_list li {
    margin: 0px 30px;
    font-size: 24px;
    color: #666;
    margin-top: 10px;
  }

  .orderinformation_list li span {
  }

  .orderinformation_list li em {
    font-size: 20px;
    color: #999;
    border: solid 1px #E0E0E0;
    padding: 4px 10px;
    margin-left: 20px;
    font-style: normal;
    border-radius: 6px;
    position: relative;
    bottom: 3px;
  }

  .snkc_xcqx_time {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    bottom: 1px;
  }

  .shangchedian {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    bottom: 3px;
  }

  .invitation_btn {
    margin: 20px 20px 0px 20px;
    padding-bottom: 20px;
  }

  .invitation_btn p {
    height: 98px;
    background: rgba(255, 105, 23, 1);
    border-radius: 10px;
    line-height: 98px;
    color: #fff;
    font-size: 36px;
    text-align: center;
  }

  .invitation_btn h6 {
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    text-align: center;
    color: #333;
    font-weight: 400;
  }

  .passenger_box {
    border-top: solid 1px #E0E0E0;
    margin-top: 30px;
  }

  .passenger_time {
    text-align: center;
    font-size: 36px;
    margin-top: 28px;
    color: #666;
  }

  .passenger_time span {
    color: #FF6917;
  }

  .passenger_box_list {
    padding: 20px;
  }

  .passenger_box_list_left {
    float: left;
    margin-top: 10px;
  }

  .passenger_box_list_left h6 {
    font-weight: 400;
    font-size: 26px;
    color: #666;
  }

  .passenger_box_list_left p {
    font-size: 20px;
    color: #999;
  }

  .passenger_box_list_left p span {
    color: #FF6917;
  }

  .passenger_box_list_center {
    float: left;
    width: 210px;
    height: 80px;
    background: rgba(255, 105, 23, 1);
    border-radius: 6px;
    color: #fff;
    margin-left: 50px;
  }

  .passenger_box_list_center h6 {
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    margin-top: 10px;
  }

  .passenger_box_list_center p {
    font-size: 24px;
    text-align: center;
  }

  .passenger_box_list_right {
    float: right;
    width: 160px;
    height: 80px;
    background: rgba(178, 178, 178, 1);
    border-radius: 6px;
    line-height: 80px;
  }

  .passenger_box_list_right p {
    font-size: 30px;
    color: #fff;
    text-align: center;
  }

  .orderinformation_bottom {
    border-top: solid 1px #E0E0E0;
    margin-top: 24px;
    padding: 0px 100px;
  }

  .orderinformation_bottom ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .orderinformation_bottom ul li {
    margin-top: 30px;
    font-size: 24px;
    color: #666;
    padding-bottom: 30px;
  }

  .quxiao_icon {
    width: 24px;
    height: 24px;
    position: relative;
    top: 3px;
    margin-right: 8px;
  }

  .taxiPayType {
    background-color: #fff;
  }

  .pay_box {
    background-color: #fff;
    height: 550px;
    padding-top: 20px;
  }

  .taxiPayAlt_hd {
    text-align: center;
    padding-top: 30px;
    font-size: 24px;
    color: #333;
  }

  .taxiPayAlt {
    text-align: center;
    padding-top: 10px;
    font-size: 24px;
    color: #333;
  }

  .taxiPayAlt span {
    font-size: 40px;
  }

  .city_pay {
    font-size: 26px;
    color: #333;
    padding: 20px 30px 0px 30px;
    border-top: solid 1px #E0E0E0;
  }

  .city_pay span {
    float: right;
    font-size: 26px;
    color: #666;
  }

  .invition_hd {
    font-size: 36px;
    color: #333;
    padding: 20px 30px;
  }

  .invition_hd_text {
    font-size: 20px;
    color: #666;
    padding: 0px 30px 20px 30px;
  }

  .city_coupom {
    height: 68px;
    line-height: 68px;
    font-size: 26px;
    color: #333;
    padding: 0px 30px;
  }

  .city_coupom span {
    float: right;
    font-size: 26px;
    color: #666;
  }

  .taxiPayDetail {
    text-align: center;
    font-size: 24px;
    color: #999;
    margin-top: 20px;
  }

  .choice-payment-method li {
    padding: 0px 30px;
    font-size: 26px;
    color: #666;
    line-height: 88px;
    height: 88px;
    border-bottom: #e0e0e0 solid 1px;
  }

  .choice-payment-method li img {
    width: 44px;
    height: 44px;
    position: relative;
    top: 12px;
  }

  .choice-payment-method li span {
    margin-left: 20px;
  }

  .choice-payment-method li b {
    float: right;
    color: #999999;
    font-weight: 400;
  }

  .choice-payment-method li b em {
    margin-right: 10px;
    font-style: normal;
  }

  .choice-payment-right {
    display: inline-block;
    background-color: #fff;
    width: 36px;
    height: 36px;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    position: relative;
    top: 12px;
  }

  .choice-payment-method li b .active {
    background: url('../../assets/imgs/ddzf_icon_pre@2x.png') no-repeat center center;
    background-size: contain;
    border-color: #fff;
    width: 36px;
    height: 36px;
  }

  .taxi_pay {
    background-color: #ff6917;
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    color: #fff;
    text-align: center;
  }

  .keyBoardShow {
    height: 600px;
    background-color: #fff;
  }

  .paypwd_box {
    height: 110px;
    border-radius: 10px;
    border: 1px solid #979797;
    margin: 0px 30px;
  }

  .paypwd_box li {
    float: left;
    border-right: solid 1px #979797;
    width: 112px;
    height: 110px;
  }

  .paypwd_box li:nth-of-type(6) {
    border-right: none;
  }

  .paypwd_box li span {
    height: 28px;
    width: 28px;
    background-color: #333;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: 40px;
    left: 40px;
  }

  .paycover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    background-color: #000;
    opacity: 0.5;
    z-index: 99999;
  }

  .pay_box_code {
    width: 500px;
    height: 200px;
    position: absolute;
    background-color: #fff;
    z-index: 100000;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -100px;
    border-radius: 7px;
  }

  .pay_box_code p {
    text-align: center;
    font-size: 30px;
    padding-top: 40px;
  }

  .repay {
    border: solid 1px #eee;
    padding: 15px 15px;
    border-radius: 7px;
  }

  .pay_success {
    padding: 15px 15px;
    color: #fff;
    background-color: #ff9617;
    margin-left: 10px;
    border-radius: 7px;
  }
}
</style>
